<template>
  <div>
    <div class="crumbs">
      <router-link to="/goods/billsadd">
        <el-button>账单添加</el-button>
      </router-link>
    </div>
    <div class="crumbs">
      <el-form ref="form" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品标题/商品归属人/备注">
          <el-input v-model="formInline.keywords" placeholder="请输入……" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch('form')">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%" :row-key="'aa'">
      <el-table-column prop="id" label="账单ID" width="100"></el-table-column>
      <el-table-column prop="goods_id" label="商品ID" width="100"></el-table-column>
      <el-table-column prop="order_number" label="订购数量" width="100"></el-table-column>
      <el-table-column prop="title" label="商品标题"></el-table-column>
      <el-table-column prop="total_price" label="总金额(元)" :formatter="priceFormat" width="100"></el-table-column>
      <el-table-column prop="is_settlement_text" label="结算状态" width="100"></el-table-column>
      <el-table-column prop="create_user_info.name" label="账单创建者" width="120"></el-table-column>
      <el-table-column prop="goods_belonger_name" label="商品归属人" width="120"></el-table-column>
      <el-table-column prop="sign_settlement_user_info.name" label="已结算人" width="100"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="130"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.is_settlement === 1" size="small" disabled>结算</el-button>
          <el-button v-if="scope.row.is_settlement === 0" size="small" @click="start(scope.$index, scope.row)">结算</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change ="handleCurrentChange"
        layout="total, prev, pager, next"
        :current-page="textData.current_page"
        :page-size="textData.per_page"
        :total="textData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import notify from '@/tools/notify'

  export default {
    data () {
      return {
        formInline: {
          keywords: ''
        }
      }
    },
    computed: {
      ...mapState({
        tableData: state => state.bills.billsList,
        textData: state => state.bills.pageData
      })
    },
    created () {
      this.billsList()
    },
    methods: {
      async billsList () {
        let payload = {
          page: this.textData.current_page,
          listRows: this.textData.per_page,
          keywords: this.$route.query.keywords
        }
        await this.$store.dispatch('bills/billsList', payload)
      },
      onSearch (formName) {
        const self = this
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$router.push({name: 'Bills', query: {keywords: self.formInline.keywords}})
            self.billsList()
          }
        })
      },
      handleCurrentChange (val) {
        this.textData.current_page = val
        this.billsList()
      },
      start (index, row) {
        let payload = {
          id: row.id
        }
        this.$store.dispatch('bills/signSettlement', payload).then(res => {
          notify.success(res.msg)
          this.billsList()
        })
      },
      priceFormat (value) {
        let price = Number(value.total_price) / 100
        return price
      }
    }
  }
</script>

<style scoped>
  .crumbs {
    display: inline-block;
    vertical-align: top;
    margin-right: 50px;
  }
</style>
